<template>
    <div>
        <div>
            <h4>HTTP</h4>
            <p>
                前端招聘经常会写到要求：'熟悉HTTP2',基本17年以后学习前端都分不清1和2的区别，
                就像  HTML4 和 HTML5 有什么区别一样，一开始学的就是  HTML5 哪还记得什么区别。
                感谢掘金作者
                <a href="https://juejin.im/post/5e54da4ef265da57325529a0" target='_blank'>
                    小夭yao爱吃糖糖糖
                </a>技术分享。
                我们先看看目前到HTTP1.1前存在的问题
            </p>
            <ul>
                <li>线头阻塞：TCP连接上只能发送一个请求，前面的请求未完成前，后续的请求都在排队等待。</li>
                <li>多个TCP连接:建立TCP连接成本很高，还会存在慢启动的问题。</li>
                <li>头部冗余，采用文本格式:每一个请求都会带上cookie、user-agent等完全相同的首部。</li>
                <li>客户端需要主动请求</li>
            </ul>
        </div>
        <div>
            <h5>HTTP/2.0</h5>
            <p>
                HTTP2性能提升的核心就在于二进制分帧层。HTTP2是二进制协议，他采用二进制格式传输数据而不是1.x的文本格式。
            </p>
            <ul>
                <li>流（Stream）：已建立的TCP连接上的双向字节流，可以承载一个或多个消息。</li>
                <li>消息（Message）：一个完整的HTTP请求或响应，由一个或多个帧组成。特定消息的帧在同一个流上发送，意味着HTTP请求或响应只能在一个流上发送。</li>
                <li>帧（Frame）：通信的基本单位。一个TCP连接上可以有任意数量的流。</li>
            </ul>
        </div>
        <div>
            <h5>多路复用</h5>
            <p>
                HTTP2让所有的通信都在一个TCP连接上完成，真正实现了请求的并发。完美解决线头阻塞和多个TCP连接的问题。
                HTTP2建立一个TCP连接，一个连接上面可以有任意多个流（stream），消息分割成一个或多个帧在流里面传输。
                帧传输过去以后，再进行重组，形成一个完整的请求或响应。这使得所有的请求或响应都无法阻塞。
            </p>
        </div>
        <div>
            <h5>头部压缩</h5>
            <p>
               HTTP2为此采用HPACK压缩格式来压缩首部。头部压缩需要在浏览器和服务器端之间：
            </p>
            <ul>
                <li>维护一份相同的静态字典，包含常见的头部名称，以及常见的头部名称和值的组合</li>
                <li>维护一份相同的动态字典，可以动态的添加内容</li>
                <li>通过静态Huffman编码对传输的首部字段进行编码</li>
            </ul>
        </div>
        <div>
            <h5>服务器端推送</h5>
            <p>
                服务器端推送使得服务器可以预测客户端需要的资源，主动推送到客户端。
                当客户端发出页面请求时，服务器端能够分析这个页面所依赖的其他资源，
                主动推送到客户端的缓存，当客户端收到原始网页的请求时，它需要的资源已经位于缓存。
            </p>
            <p>
                HTTP/3.0把底层协议换成UDP了，集成了TLS，增加了丢包重传等tcp的功能，相比2.0，握手时间快，而且解决了2.0一个丢包阻塞全部请求的问题。
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name:"linkHTTP",
}
</script>

